<template>
  <div class="msg">
    <!-- 头部 -->
    <head-usual :title="title" :to="to"></head-usual>
    <mt-navbar v-model="selected">
        <mt-tab-item id="-1">全部</mt-tab-item>
        <mt-tab-item id="0">未读</mt-tab-item>
        <mt-tab-item id="1">已读</mt-tab-item>
    </mt-navbar>
    <!--消息切换板块-->
    <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
         <mt-tab-container v-model="selected" swipeable>
            <mt-tab-container-item id="-1">
                <div class="plate plate-no" v-for="(item,index) in getMessageList" :key="index">
                    <div class="title">
                      <div class="title-left">
                          <p>{{item.title}}</p>
                          <span class="time">{{item.addtime}}</span>
                          <span v-if="!item.isRead"  @click="HanddelHaveRead(index,item.id)" class="read ">未读</span>
                      </div>
                        <span class="delete" @click="HandelDel(index,item.id)">删除</span>
                        
                    </div>
                    <p class="word">{{item.info}}</p>
                    <div class="more">
                        <span class="msg-lei">{{item.type}}</span>
                      <router-link :to="'/user/message/detail/'+item.id">了解更多&nbsp;&gt;</router-link>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="0">
                <div class="plate plate-no"  v-for="(item,index) in getMessageList" :key="index">
                    <div class="title">
                       <div class="title-left">
                        <p>{{item.title}}</p>
                         <span class="time">{{item.addtime}}</span>
                        <span v-if="!item.isRead"  @click="HanddelHaveRead(index,item.id)" class="read ">未读</span>
                        </div>
                        <span class="delete"  @click="HandelDel(index,item.id)">删除</span>
                    </div>
                    <p class="word">{{item.info}}</p>
                    <div class="more">
                        <span class="msg-lei">{{item.type}}</span>
                        <router-link :to="'/user/message/detail/'+item.id">了解更多&nbsp;&gt;</router-link>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="1">
                 <div class="plate plate-no"  v-for="(item,index) in getMessageList" :key="index">
                    <div class="title">
                         <div class="title-left">
                        <p>{{item.title}}</p>
                        <span v-if="!item.isRead" @click="HanddelHaveRead(index,item.id)" class="read ">未读</span>
                        <span class="time">{{item.addtime}}</span>
                        </div>
                        <span class="delete"  @click="HandelDel(index,item.id)">删除</span>
                    </div>
                    <p class="word">{{item.info}}</p>
                    <div class="more">
                        <span class="msg-lei">{{item.type}}</span>
                        <router-link :to="'/user/message/detail/'+item.id">了解更多&nbsp;&gt;</router-link>
                    </div>
                </div>
            </mt-tab-container-item>
         </mt-tab-container>
        <div v-show="loading" class="page-infinite-loading">
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
        </div>
        <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
    </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import { GetMessageList, HaveRead, Delete } from "@/api/user/message";
export default {
  name: "message",
  data() {
    return {
      selected: "-1",
      to:'/user',
      searchCondition: {
        id: 0,
        pageIndex: 1,
        isRead: "-1"
      },
      getMessageList: [],
      totalPage: 0,
      loading: false, //是否显示加载中
      allLoaded: false, //加载完毕
      title: "个人消息"
    };
  },
  created() {
    this.searchCondition.id = this.$store.state.userinfo.id;
    this.Initialization();
  },
  methods: {
    // 对消息标记已读
    HanddelHaveRead(index, id) {
      HaveRead(id).then(res => {
        if (res.Data) {
          this.getMessageList[index].isRead = true;
        } else this.$toast("取消失败,请刷新重试！");
      });
    },
    //删除
    HandelDel(index,id) {
      
      MessageBox.confirm(
        "你确定删除该消息?"
      ).then(action => {
        Delete(id).then(res => {
          if (res.Data) {
            this.getMessageList.splice(index, 1);
            this.$toast("删除成功")
          } else this.$toast("删除失败,请刷新重试！");
        });
      });
    },
    Initialization() {
      this.$indicator.open();
      setTimeout(() => {
        GetMessageList(this.searchCondition).then(res => {
          if (res.StatusCode === 200) {
            this.getMessageList = res.Data;
            this.totalPage = res.TotalPage;
            this.$indicator.close();
          }
        });
      }, 100);
    },
    loadMore() {
      //分页加载更多
      if (this.searchCondition.pageIndex >= this.totalPage) {
        this.allLoaded = true;
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.searchCondition.pageIndex++;
        GetMessageList(this.searchCondition).then(res => {
          if (res.StatusCode === 200) {
            this.getMessageList = this.getMessageList.concat(res.Data);
          }
        });
        this.loading = false;
      }, 1000);
    }
  },

  //监听切换类别触发数据刷新
  watch: {
    selected(val, oldVal) {
      this.searchCondition.isRead = val;
      this.searchCondition.pageIndex = 1;
      this.Initialization();
    }
  },
};
</script>
<style lang="scss" scoped>
.mint-navbar {
  width: 187px;
  height: 44px;
  .mint-tab-item.is-selected {
    color: #fd4f00;
    border-bottom: 2px solid #fd4f00;
    
  }
}
.mint-tab-container {
  padding: 13px;
  background: #f4f4f4;
  font-size: 14px;
  margin-top: 3px;
  .mint-tab-container-item {
    .plate {
      background: #fff;
      padding: 13px;
      margin-top: 13px;
      clear: both;
      display: block;
      .title {
        height: 32px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
        .title-left{
          display: flex;
          align-items: center;
           p {
              display: inline-block;
              font-size: 16px;
              font-weight: bold;
              width: 145px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #999;
            }
        .read {
              bottom: 10px;
              font-size: 14px;
              margin-left: 4px;
              color: #999;
              height: 20px;
              line-height: 20px;
              border: 1px solid #999;
              padding: 0 4px;
              }
          .time {
            color: #999;
          }
        }
       
        .delete{
          font-size: 16px;
          color:#999;

        }
      }
      .word {
        padding-bottom: 19px;
        text-overflow: ellipsis;
        line-height: 26px;
      }
      .more {
        padding-top: 13px;
        border-top: 1px solid #dcdcdc;
        .msg-lei {
          color: #3887fe;
        }
        a {
          float: right;
          color: #999;
          font-size: 14px;
        }
      }
    }
    .plate:first-child {
      margin-top: 0;
    }
    .plate-no {
      .title {
        .read {
          color: #fd4f00!important;
          border: 1px solid #fd4f00!important;
        }
        p {
          color: #000;
        }
      }
    }
  }
}
</style>


